<template>
  <div class="user-container">
    <q-card class="q-ma-md my-card shadow-6">
      <q-item>
        <q-item-section class="q-mt-md q-mb-md" avatar>
          <q-avatar style="width: 80px; height: 80px">
            <img :src="user.avatar" />
          </q-avatar>
        </q-item-section>

        <q-item-section>
          <q-item-label style="font-size: 20px">{{
            user.username
          }}</q-item-label>
          <q-item-label class="q-mt-md" caption>{{ user.alias }}</q-item-label>
          <q-item-label class="q-mt-md" caption>{{
            user.position
          }}</q-item-label>
        </q-item-section>
      </q-item>
    </q-card>
    <div
    v-if="!isWechat"
      class="q-mt-sm q-pb-md q-pa-sm q-gutter-md"
      style="background-color: white"
    >
      <q-list class="rounded-borders">
        <q-item clickable v-ripple>
          <q-item-section bordered avatar top>
            <q-avatar icon="mdi-cash-multiple" color="orange-8" text-color="white" />
          </q-item-section>

          <q-item-section>
            <q-item-label >工资单</q-item-label>
          </q-item-section>

          <q-item-section side>
            <q-icon name="mdi-chevron-right" />
          </q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section avatar top>
            <q-avatar icon="mdi-gift-outline" color="cyan" text-color="white" />
          </q-item-section>

          <q-item-section>
            <q-item-label>我的福利</q-item-label>
          </q-item-section>

          <q-item-section side>
            <q-icon name="mdi-chevron-right" />
          </q-item-section>
        </q-item>

        <q-separator spaced />

        <q-item clickable v-ripple to="/user/settings">
          <q-item-section avatar top>
            <q-avatar icon="eva-settings-2-outline" color="blue" text-color="white" />
          </q-item-section>

          <q-item-section>
            <q-item-label >设置</q-item-label>
          </q-item-section>

          <q-item-section side>
            <q-icon name="mdi-chevron-right" />
          </q-item-section>
        </q-item>

      </q-list>
    </div>
    <div class="fit row wrap justify-center items-start content-start">
      <q-btn
        class="q-ma-md"
        outline
        size="16px"
        color="primary"
        label="退出登录"
        @click="confirm"
      />
    </div>
  </div>
</template>

<script>
import { getUserInfo } from "assets/api/user";
import { removeItem,getItem } from "assets/utils/storage";
export default {
  name: "userindex",
  data() {
    return {
      user: [],
      isWechat:false,
    };
  },
  created() {
    this.loadUserInfo();
  },
  mounted(){
    if(window.__wxjs_environment === 'miniprogram'){
      this.isWechat = true;
    };

  },
  methods: {
    
    loadUserInfo() {
      let userinfo =  getItem('userinfo');
      if(userinfo){
        this.user=userinfo;
        return
      }
      getUserInfo().then((res) => {
        this.user = res.data.data;
        this.$store.commit("setuserinfo", this.user);
      });
    },
    confirm() {
      this.$q
        .dialog({
          title: "提示",
          message: "确认退出登录吗？",
          cancel: true,
          persistent: true,
        })
        .onOk(() => {
          removeItem("user");
          removeItem("userinfo");
          this.$router.push("/login");
          this.$q.notify({
            color: "light-green-4",
            icon: "far fa-check-circle",
            position: "top",
            textColor: "white",
            message: "退出成功！",
            timeout: "1500",
          });
        })
        .onOk(() => {
          // console.log('>>>> second OK catcher')
        })
        .onCancel(() => {
          // console.log('>>>> Cancel')
        })
        .onDismiss(() => {
          // console.log('I am triggered on both OK and Cancel')
        });
    },
  },
};
</script>

<style>

</style>
